<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>博客概览</title>
<!--    <link rel="stylesheet" href="http://localhost:8080/css/blog.css">-->
    <link rel="stylesheet" th:href="@{/css/blog.css}">
</head>
<body>

<div id="total">
    <div id="header">
        <div class="center-position">
        <a th:href="@{/newBlogPage}" class="btncss" th:text="${username}+'写博客'"></a>
        </div>
    </div>
    <div id="bodyer">
    <div id="main">
        <ul class="main-ul">
            <li  class="main-ul-li" th:each="blog : ${blogs}">
                <div class="content">
                    <header class="post-header">
                        <a class="title" th:href="@{/detail(id=${blog.id})}" th:text="${blog.title}"></a>
                    </header>
                    <div class="post-body" th:text="${blog.shortContent}+'...'"></div>
                    <footer class="post-footer">
                        <div class="blog-author" th:text="${blog.author}"></div>
                        <div class="blog-browseNum" th:text="${blog.browseNum}+'人浏览'" ><span>John Doe</span></div></a>
                        <div class="blog-praiseNum" th:text="${blog.praiseNum}+'人点赞'"><i class="icon-clock"></i> 2 months ago</div>
                        <div class="blog-date" th:text="${#temporals.format(blog.createTime,'yyyy/MM/dd HH')}"><i class="icon-clock"></i> 2 months ago</div>
                    </footer>
                </div>
            </li>
        </ul>
    </div>
    <div id="aside">
        <div>
            <div>
                <div class="head-line">浏览排行榜</div>
                <ul class="side-ul">
                    <li class="side-ul-li">

                    </li>
                </ul>
            </div>
        </div>
        <div>
            <div>
                <div class="head-line">点赞排行榜</div>
                <ul class="side-ul">
                    <li class="side-ul-li">

                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div>
</div>


<!--<table>-->
<!--    <tbody>-->
<!--    <tr th:each="blog : ${blogs}">-->
<!--        <td th:text="${blog.author}"></td>-->
<!--        <td th:text="${blog.id}"></td>-->
<!--        <td th:text="${blog.title}"></td>-->
<!--        <td th:text="${blog.createTime}"></td>-->
<!--        <td th:text="${blog.browseNum}"></td>-->
<!--        <td th:text="${blog.praiseNum}"></td>-->
<!--        <td th:text="${blog.shortContent}"></td>-->
<!--        <td th:text="${blog['author']}"></td>-->
<!--        <td th:text="${blog['title']}"></td>-->
<!--        <td th:text="${blog['browseNum']}"></td>-->
<!--        <td th:text="${blog['shortContent']}"></td>-->
<!--    </tr>-->
<!--    </tbody>-->
<!--</table>-->
</body>
</html>